<template>
  <div class="box">
    <header class="mine_header">
      <img src="@/../public/img/person/back.png" alt="" class="back" @click="$router.go(-1)">
      <p>我的主页</p>
      <img src="@/../public/img/person/set.png" alt="" class="set">
    </header>
    <section class="mine_content">
      <div class="detail">
        <div class="avatar" @click="edit"></div>
        <img src="@/../public/img/person/kaibozhong.png" alt="直播中" class="kaibozhong">
        <div class="dv">
          <h2>我的昵称</h2>
          <p><i>20</i><i>巨蟹座</i></p>
        </div>
        <h4><img src="@/../public/img/person/online.png" alt="游戏">当前在线 关注 52 粉丝 0</h4>
        <p>这个人懒死了什么都没写~</p>
      </div>
      <hr />
      <van-tabs v-model="active" type="card">
        <van-tab title="资料">
          <div class="dv1">
            <div class="music"></div>
            <h3>我的相册</h3>
            <div class="album">
              <img src="@/../public/img/person/avatar1.png" alt="">
              <img src="@/../public/img/person/avatar1.png" alt="">
              <img src="@/../public/img/person/avatar1.png" alt="">
              <img src="@/../public/img/person/avatar1.png" alt="">
              <img src="@/../public/img/person/avatar1.png" alt="">
              <img src="@/../public/img/person/avatar1.png" alt="">
              <img src="@/../public/img/person/avatar1.png" alt="">
            </div>
          </div>
        </van-tab>
        <van-tab title="评价">
          <div class="dv2">
            <h2>4.5<span>272</span></h2>
            <p>272个评论<span>接单数</span></p>
            <div class="recommend">
              <img src="@/../public/img/person/p1.png" alt="">
              <img src="@/../public/img/person/p2.png" alt="">
              <img src="@/../public/img/person/p3.png" alt="">
              <img src="@/../public/img/person/p4.png" alt="">
              <img src="@/../public/img/person/p5.png" alt="">
            </div>
            <h3>共20条评价</h3>
            <div class="thisone">
              <div class="avatar"></div>
              <div class="name">
                <h2>消失的回忆</h2>
                <p>2020-03-09 王者荣耀 | 倔强青铜 | 排位赛</p>
              </div>
              <p>所有人快来和我一起尬聊啊！我在哈哈哈哈哈跨年派对等你哦~</p>
            </div>
            <div class="thisone">
              <div class="avatar"></div>
              <div class="name">
                <h2>消失的回忆</h2>
                <p>2020-03-09 王者荣耀 | 倔强青铜 | 排位赛</p>
              </div>
              <p>所有人快来和我一起尬聊啊！我在哈哈哈哈哈跨年派对等你哦~</p>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tab, Tabs, Icon, Popup, Cell } from 'vant'
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Icon)
Vue.use(Popup)
Vue.use(Cell)
export default {
  data () {
    return {
      active: 0,
      show: false
    }
  },
  methods: {
    edit () {
      this.$router.push({ path: '/quanquan/editmine' })
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.box {
  @include rect(100%, 100%);
  @include flexbox();
  .mine_header {
    @include rect(100%, 1.5rem);
    padding: 0.1rem 0.26rem;
    background: url('~@/../public/img/person/bg.png');
    position: relative;
    img {
      width: 0.2rem;
    }
    .back {
      float: left;
    }
    p {
      color: #fff;
      position: absolute;
      font-size:0.18rem;
      top: 0.1rem;
      left: 40%;
    }
    .set {
      float: right;
    }
  }
  section {
    @include flex();
    @include rect(100%, 100%);
    border-radius: 10px 10px 0 0;
    background-color: white;
    overflow: auto;
    margin-top: -10px;
    border-radius: 10px 10px 0 0;
    background-color: white;
    .detail {
      padding: 0.1rem 0 0 0.26rem;
      position: relative;
      background-color: white;
      .avatar {
        margin: 0.1rem 0 0 0.26rem;
        width: 0.8rem;
        height: 0.8rem;
        background: url('~@/../public/img/person/avatar.png');
        background-size: 100% 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      .kaibozhong {
        width: 0.8rem;
        position: absolute;
        top: 20px;
        right: 20px;
      }
      .dv {
        margin-left: 0.9rem;
        height: 0.8rem;
        overflow: hidden;
        h2 {
          font-size:0.18rem;
          height: 0.24rem;
          margin: 0.16rem 0;
          span {
            font-size:0.14rem;
            font-weight: normal;
            margin-left: 0.5rem;
          }
        }
        p {
          font-size: 0.14rem;
          color: #fff;
          height: 0.24rem;
          i {
            display: block;
            text-align: center;
            float: left;
            line-height: 0.24rem;
          }
          i:nth-child(1) {
            width: 0.4rem;
            height: 0.24rem;
            background: url('~@/../public/img/person/age.png');
            background-size: 100% 100%;
          }
          i:nth-child(2) {
            width: 0.6rem;
            height: 0.24rem;
            background: url('~@/../public/img/person/star.png');
            background-size: 100% 100%;
            margin-left: 4px;
          }
        }
      }
      h4 {
        margin: 0.1rem 0;
      }
    }
    .van-tabs__nav {
      @include flexbox();
      justify-content: space-around;
      height:0.5rem;
      div {
        height:0.34rem;
        font-size:0.18rem;
        font-family:PingFang SC;
        font-weight:bold;
        line-height:0.34rem;
      }
      .van-tab--active {
        color:rgba(104,93,241,1);
      }
    }
    .dv1 {
      .music {
        @include rect(90%, 1rem);
        background: url('~@/../public/img/person/bg2.png');
        background-size: 100% 100%;
        margin: 0 auto;
      }
      h3 {
        margin: 0.1rem 0 0 0.16rem;
      }
      .album {
        width: 100%;
        @include flexbox();
        flex-wrap: wrap;
        img {
          width: 1rem;
          height: 1rem;
          margin: 0.1rem 0 0 0.16rem;
        }
      }
    }
    .dv2 {
      margin: 0 0.16rem;
      h2 {
        font-size: 0.18rem;
        color: #333333;
        background: url('~@/../public/img/person/xingxing.png') no-repeat 40px 8px;
        background-size: 60px;
        span {
          float: right;
        }
      }
      p {
        font-size: 0.12rem;
        color: #1A1A1A;
        span {
          float: right;
        }
      }
      .recommend {
        @include rect(100%, 60px);
        border-top: 1px solid #E1E1E1;
        border-bottom: 1px solid #E1E1E1;
        margin: 10px 0;
        @include flexbox();
        flex-wrap: wrap;
        padding-top: 6px;
        img {
          width: 100px;
          height: 20px;
          margin-right: 5px;
        }
      }
      .thisone {
        position: relative;
        margin: 0.1rem 0;
        .avatar {
          width: 0.5rem;
          height: 0.5rem;
          background: url('~@/../public/img/person/avatar.png');
          background-size: 100% 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        .name {
          margin-left: 60px;
          h2 {
            background: url('~@/../public/img/person/xingxing.png') no-repeat right 8px;
            background-size: 60px;
          }
          p {
            font-size: 0.14rem;
            color: #1A1A1A;
          }
        }
        p {
          font-size: 0.16rem;
          color: #333333;
        }
      }
    }
  }
}
</style>
